/** { "style":{ "navigationStyle": "custom", "navigationBarTextStyle": "white" } } */

<template>
	<view :class="[isiPhone ? 'pb-180' : 'pb-140', 'order']">
		<view class="bage-co"></view>

		<view class="con">
			<view class="bar" :style="{ height: customBar + 'px' }"></view>
			<view class="relative z-index3">
				<u-navbar title="预约验车" leftIcon="arrow-left" bgColor="transparent" leftIconColor="#fff"
					@leftClick="leftClick" titleStyle="color:#fff"></u-navbar>
			</view>

			<view class="card-base-box">
				<view class="card-cont">
					<view v-if="charInfo.id">
						<!-- <view class="wz">违章0</view> -->

						<view class="card-top flex-tbc" @click="qhChar">
							<view>
								<view class="chepai flex-tbc">
									{{charInfo.code}}<text
										:class="[charInfo.type.type == 2? 'text1':'text2']">{{charInfo.type.type == 2? '蓝':'绿'}}</text>
								</view>
								<view class="che-leix text-ellipsis-2">{{charInfo.pin}}·{{charInfo.type.name || ''}}
								</view>
							</view>

							<view class="jiashi-image">
								<image class="ww100 hh100" :src="getImage(charInfo.images)" mode="aspectFill"
									@click.stop="onPreviewImage(charInfo.images)">
								</image>
							</view>

							<view class="qiehuan flex-tbc flex-shrink" @click="qhChar">
								切换
								<image class="w11 h18" src="__ROOT__/common/images/row-r2.png" mode="aspectFill">
								</image>
							</view>
						</view>

						<view class="info flex-tbc mt12">
							<view class="info1">
								年检时间
								<text class="ml10">{{getDate(charInfo.y_day)}}</text>
							</view>

							<view class="info1 ml34">
								保险到期
								<text class="ml10">{{getDate(charInfo.b_day)}}</text>
							</view>
						</view>
					</view>

					<view class="flex-lr-tbc" v-else @click="qhChar">
						<view class="hint-base flex-all-c">
							请选择<text v-if="isDaifu == 1">客户</text>车辆 <image class="w11 h18 ml10"
								src="__ROOT__/common/images/row-r.png" mode="aspectFill">
							</image>
						</view>
					</view>
				</view>
			</view>

			<view class="form-page form-base mt20">
				<view class="form-item flex-lr-tbc">
					<view class="le">选择门店</view>

					<view class="right flex-tbc input-right">
						<picker-text class="picker-s" :pickerValue="details.name" placeholder="请选择" />

						<!-- <image class="w11 h19 ml10" src="__ROOT__/common/images/row-r1.png" mode=""></image> -->
						<!-- <input type="text" placeholder="请选择车辆" placeholder-class="color: #BDBDBD;font-size: 30rpx;"> -->
					</view>
				</view>

				<view class="form-item flex-lr-tbc" v-if="userInfo.is_yw == 1">
					<view class="le">是否代付</view>

					<view class="right flex-tbc input-right">
						<view class="tab-list display_flex">
							<view class="active item flex-all-c ml24" v-for="item in checkqc" :key="item.value"
								@click="onDaifu(item)">
								<image v-show="isDaifu == item.value" class="wh28"
									src="__ROOT__/common/images/radio1-2.png" mode=""></image>
								<image v-show="isDaifu != item.value" class="wh28"
									src="__ROOT__/common/images/radio1-1.png" mode=""></image>

								<view class="label label1 ml8">
									{{ item.label }}
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="form-item flex-lr-tbc" @click="onKehu" v-if="isDaifu == 1">
					<view class="title">
						代付客户
					</view>

					<view class="right flex-tbc input-right">
						<picker-text class="picker-s" :pickerValue="kehuInfo.name" placeholder="请选择" />
						<image class="w11 h19 ml10" src="__ROOT__/common/images/row-r1.png" mode=""></image>
					</view>

				</view>

				<view class="form-item flex-lr-tbc">
					<view class="le">上门取车</view>

					<view class="right flex-tbc input-right">
						<view class="tab-list display_flex">
							<view class="active item flex-all-c ml24" v-for="item in checkqc" :key="item.value"
								@click="onCharType(item)">
								<image v-show="checkV == item.value" class="wh28"
									src="__ROOT__/common/images/radio1-2.png" mode=""></image>
								<image v-show="checkV != item.value" class="wh28"
									src="__ROOT__/common/images/radio1-1.png" mode=""></image>

								<view class="label label1 ml8">
									{{ item.label }}
								</view>
							</view>
						</view>
					</view>
				</view>

				<view v-if="checkV == 1">

					<view class="form-item flex-lr-tbc" @click="onShowDate(1)">
						<view class="le">取车时间</view>

						<view class="right flex-tbc input-right">
							<picker-text class="picker-s" :pickerValue="formData.day" placeholder="请选择" />

							<image class="w11 h19 ml10" src="__ROOT__/common/images/row-r1.png" mode=""></image>
						</view>
					</view>


					<view class="form-item flex-lr-tbc" @click="jumpAddress">
						<view class="le">取车地点</view>

						<view class="right flex-tbc input-right">
							<picker-text class="picker-s" :pickerValue="addressInfo.address" placeholder="请选择" />

							<image class="w11 h19 ml10" src="__ROOT__/common/images/row-r1.png" mode=""></image>
							<!-- <input type="text" placeholder="请选择车辆" placeholder-class="color: #BDBDBD;font-size: 30rpx;"> -->
						</view>
					</view>

				</view>


				<view v-if="checkV == 0">
					<view class="form-item flex-lr-tbc" @click="onShowDate(1)">
						<view class="le">预约时间（选填）</view>

						<view class="right flex-tbc input-right">
							<picker-text class="picker-s" :pickerValue="formData.day" placeholder="请选择" />

							<image class="w11 h19 ml10" src="__ROOT__/common/images/row-r1.png" mode=""></image>
						</view>
					</view>

				</view>

			</view>

			<view class="form-page form-base mt20">
				<view class="form-page form-base mt20">
					<view class="form-item flex-lr-tbc">
						<view class="le">取车联系人姓名</view>

						<view class="right flex-tbc input-right">
							<input type="text" v-model="formData.name" placeholder="请输入"
								placeholder-class="color: #BDBDBD;font-size: 30rpx;" @change="inputChange" />
						</view>
					</view>
				</view>

				<view class="form-page form-base mt20">
					<view class="form-item flex-lr-tbc">
						<view class="le">取车联系人手机号</view>

						<view class="right flex-tbc input-right">
							<input type="number" maxlength="11" v-model="formData.mobile" placeholder="请输入"
								placeholder-class="color: #BDBDBD;font-size: 30rpx;" @input="inputNum"
								@change="inputChange" />
						</view>
					</view>
				</view>
			</view>

			<view class="form-page form-base mt20">
				<view class="form-item">
					<view class="le">
						其他资料（选填）
						<text>请上传身份证照片或营业执照照片</text>
					</view>

					<view class="right mt16">
						<upload-image :fileList="fileList" :maxCount="6" @upload="upload" />
					</view>
				</view>
			</view>

			<view class="form-page form-base mt20 pt40 pb40">
				<view class="form-item flex-lr-tbc" @click="onShowQuan">
					<view class="le">
						抵扣券
					</view>

					<view class="right flex-tbc input-right" v-if="quanList && quanList.length>0">
						<picker-text class="picker-s" :pickerValue="currentYHQ.info.name" placeholder="请选择" />

						<image class="w11 h19 ml10" src="__ROOT__/common/images/row-r1.png" mode=""></image>
					</view>

					<view class="right flex-tbc input-right" v-else>
						暂无可用抵扣券
					</view>
				</view>
			</view>
		</view>


		<view :class="[isiPhone? 'pb-68':'pb-32', 'fixed_b']">
			<view class="footer-f flex-lr-tbc">
				<view class="price">
					￥{{formData.pay}}
				</view>

				<view class="btn btn2" @click="saveOrder">
					支付
				</view>
			</view>
		</view>
		<!-- :formatter="formatter"
			:filter="filterDate" -->
		<u-datetime-picker ref="dateRef" :show="showDate" v-model="dateV" mode="datetime" closeOnClickOverlay
			@cancel="showDate = false" @close="showDate = false" :minDate="minDate" :maxDate="maxDate"
			@confirm="confirmDate" confirmColor="#128F8F" :formatter="formatter"
			:filter="filterDate"></u-datetime-picker>
		<!-- :formatter="formatter" -->
		<u-popup :show="showPopup" :round="roundPopup" @close="showPopup = false">
			<view class="content-p">
				<view class="clear-icon" @click.stop="onClose">
					<image src="__ROOT__/common/images/clear-icon.png" mode=""></image>
				</view>

				<view class="title-pop">优惠券</view>


				<view class="list">

					<view :class="[
							Number(item.info.full) <= Number(formData.totle) ? 'item1' : 'item2',
							'item',
							'flex-tbc'
						]" v-for="(item, index) in quanList" :key="index" @click="onQuan(item, index)">
						<!-- 	<image class="wh1 absolute-tl z-index1"
							src="https://lifa.wxqiandao.com/static/images/image-bg-1.png" mode=""></image> -->
						<view class="con1 ww100 flex_1 flex-tbc relative z-index2">
							<!-- price-1 price-2 -->

							<view class="left flex-all-c">
								<view>
									<view class="price display_flex align-items_baseline flex-shrink">
										<text>￥</text>
										{{Number(item.info.price)}}
									</view>
									<view class="hint">
										满{{Number(item.info.full)}}使用
									</view>
								</view>

							</view>


							<view class="info">
								<view class="title">{{item.info.name}}</view>
								<view class="test mt-12 flex-tbc">
									有效期至 {{item.info.etime}}
								</view>

							</view>

							<view class="btns" v-if="Number(item.info.full) <= Number(formData.totle)">

								<image class="radio-icon" src="__ROOT__/common/images/radio1.png" mode=""
									v-if="item.id == currentYHQ.id"></image>
								<image class="radio-icon" src="__ROOT__/common/images/radio.png" mode="" v-else>
								</image>
							</view>

							<view class="btns flex-shrink buke" v-else>
								不可用
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>



		<v-picker :show="showPicker" :columns="columns" :keyName="keyName" :pickerCurrent="pickerCurrent"
			@close="showPicker = false" @confirm="onPicker" />

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		nextTick
	} from 'vue';
	import pickerText from '@/components/picker-text.vue';
	import timeFormat from '@/utils/timeFormat.js'
	import vPicker from '@/components/v-picker.vue';
	import xaoi from '../../../lib/xaoi';
	import {
		inputNumber
	} from '@/utils/global.js'
	const isiPhone = ref('');
	const statusBar = ref('');
	const customBar = ref('');
	const initPage = () => {
		isiPhone.value = uni.getStorageSync('isiPhone');
		statusBar.value = uni.getStorageSync('statusBar');
		customBar.value = uni.getStorageSync('customBar');
	};

	const pageId = ref('');

	const leftClick = () => {
		uni.navigateBack();
	};
	const isDaifu = ref(0)
	const checkV = ref(0);
	const checkqc = ref([{
			value: 1,
			label: '是'
		},
		{
			value: 0,
			label: '否'
		}
	]);

	const showDate = ref(false);
	const dateV = ref(new Date().getTime());

	const minDate = ref(new Date().getTime());

	const maxDate = ref();

	const dateRef = ref(null)
	// 获取14天之后的日期
	const getDay = () => {
		let date = new Date();
		let time1 = date.getTime(); // 获取当前时间戳
		let yearC = date.getFullYear();
		let monthC = date.getMonth() + 1;
		let dayC = date.getDate();
		let hourC = date.getHours();


		// let time2 = time1 + 1000 * 60 * 60 * 24 * 14;
		// let date2 = new Date(time2);
		// let year = date2.getFullYear();
		// let month = date2.getMonth() + 1;
		// let hour = date2.getHours();
		// let minute = date2.getMinutes();
		// let day = date2.getDate();
		let day1 = date.setDate(dayC + 14)
		// const eHour = details.value.etime.split(':')[0]
		maxDate.value = day1
		// const dateStr = `${year}/${month}/${day1} ${eHour}:50`;
		// maxDate.value = new Date(dateStr).getTime();
		// console.log(dateStr, 'dateStrdateStrdateStrdateStr')
		// console.log(new Date(dateStr), 'dateStrdateStrdateStrdateStr')


		minDate.value = dateV.value = new Date(`${yearC}/${monthC}/${dayC} ${hourC}:00`).getTime()

		// if (minute >= 50) {
		// 	const t = 60 - minute
		// 	let time = time1 + 1000 * 60 * t
		// 	const miDate = new Date(time)
		// 	const y = miDate.getFullYear();
		// 	const m = miDate.getMonth() + 1;
		// 	const d = miDate.getDate();
		// 	const h = miDate.getHours();
		// 	const dateStr1 = `${y}/${m}/${d} ${h}:00`;
		// 	console.log(dateStr1, 'dateStr1dateStr1dateStr1dateStr1')
		// 	minDate.value = new Date(dateStr1).getTime()
		// 	// minDate.value = time
		// }

		// if (hour > eHour) {
		// 	let day2 = dayC + 1
		// 	// let day2 = new Date().getDate() + 1

		// 	const newTime = date.setDate(day2);
		// 	const newDate = new Date(newTime)

		// 	const y = newDate.getFullYear();
		// 	const m = newDate.getMonth() + 1;
		// 	const d = newDate.getDate();

		// 	const dateStr1 = `${y}/${m}/${d} 00:00`;
		// 	minDate.value = new Date(dateStr1)
		// }

		dateRef.value.setFormatter(formatter)
	};
	const filterDate = (mode, options) => {
		if (mode === 'hour') {
			if (!details.value.stime) return []
			const sHour = details.value.stime.split(':')[0]
			const eHour = details.value.etime.split(':')[0]

			return options.filter((value) => {
				return Number(value) >= Number(sHour) && Number(value) <= Number(eHour)
			});

		} else if (mode === 'minute') {

			return options.filter((value) => Number(value) % 10 === 0);
		}

		return options;
	}
	const formatter = (type, value) => {
		// console.log(type)
		if (type === 'year') {
			return `${value}年`
		}
		if (type === 'month') {
			return `${value}月`
		}
		if (type === 'day') {
			return `${value}日`
		}

		if (type === 'hour') {
			return `${value}时`
		}

		if (type === 'minute') {
			return `${value}分`
		}
	}

	const onCheck = (e) => {
		checkV.value = e.value
	};

	const onUpload = (e) => {
		upload(e)
	};

	// const onShowQuan = () => {
	// 	if (!quanList.value || quanList.value.length == 0) return
	// 	showPopup.value = true
	// }
	const kehuInfo = reactive({
		name: '',
		id: ''
	})

	const formData = ref({
		totle: '',
		pay: '',
		coupon_id: '', // 优惠券ID
		car_id: '', // 
		sid: '', // 店铺Id
		images: '', // 其他资料
		name: '',
		mobile: '',
		way: '',
		day: '',
		address: '',
	});

	const fileList = ref([]);
	const upload = (e) => {
		fileList.value = e;

		initStorage()
	};

	const onShowDate = () => {
		showDate.value = true;
	};
	const confirmDate = (e) => {
		formData.value.day = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
		initStorage()
		showDate.value = false;
	};


	const showPopup = ref(false);
	const roundPopup = ref(20);

	const onShowQuan = () => {
		if (!quanList.value || quanList.value.length == 0) return
		showPopup.value = true
	}

	const onClose = () => {
		showPopup.value = false;
	};

	const charInfo = ref({})
	const getCarInfo = async () => {
		const res = await $post("/index/get_index")

		charInfo.value = res.c_list

		formData.value.name = res.c_list.car_name
		formData.value.mobile = res.c_list.car_mobile

		getJSPrice(charInfo.value.id)

	}

	const quanList = ref([])
	const currentYHQ = ref({
		info: {}
	})

	const getUserCoupon = async () => {
		const res = await $post("/stores/user_coupon", {
			type: charInfo.value.type.type
		})

		quanList.value = res.list

		quanList.value.map((item) => {
			item.isRadio = false;
		});
		quanList.value = sortArr1(quanList.value, formData.value.totle);
	}


	const sortArr1 = (arr, num) => {
		arr.sort((a, b) => {
			return Number(a.info.full) - (Number(num) - 0.01);
		});
		return arr;
	};
	const isFirst = ref(true)
	const getCarDetail = async (id) => {
		const res = await $post('/user/get_car_info', {
			id
		})
		getJSPrice(id)
		charInfo.value = res.info
		charInfo.value.type = {
			type: charInfo.value.cate,
			name: charInfo.value.car_type
		}
		const orderYancheC = uni.getStorageSync('orderYancheC')
		if (orderYancheC && orderYancheC.name && isFirst.value) {
			formData.value.name = orderYancheC.name
			formData.value.mobile = orderYancheC.mobile
		} else {
			formData.value.name = res.info.car_name
			formData.value.mobile = res.info.car_mobile
		}

		isFirst.value = false
		initStorage()
		// type.type
		// name
	}

	const details = ref({})
	const getDetails = async () => {
		let res = await $post('/stores/get_stores_info', {
			id: pageId.value
		});
		details.value = res.info;

		getDay()
	}

	const getJSPrice = async (id) => {
		let res = await $post('/stores/calculate_price', {
			car_id: id
		});
		formData.value.totle = res
		const currentYHQ1 = uni.getStorageSync('currentYHQ')
		if (currentYHQ1) {
			currentYHQ.value = JSON.parse(currentYHQ1)
		} else {
			currentYHQ.value = {
				info: {}
			}
		}
		quanList.value = []
		getPrice()
		// 获取优惠券
		getUserCoupon()
	}

	// 获取价格
	const getPrice = () => {
		if (!currentYHQ.value.id) {
			formData.value.pay = formData.value.totle
		} else {
			formData.value.pay = Vue.jian(Number(formData.value.totle), Number(currentYHQ.value.info.price))
		}
		formData.value.pay = formData.value.pay.toFixed(2)
	}

	const addressInfo = ref({})
	const getDelAddress = async () => {
		let res = await $post('/user/get_mo_address');
		if (res.info) {
			addressInfo.value = res.info
		}
	}

	const getAddress = async (id) => {

		let res = await $post('/user/get_address_info', {
			id
		})
		if (res.info) {
			addressInfo.value = res.info
		}
	}



	const getImage = (images) => {
		if (!images || images.length == 0) return ''
		if (typeof images == "string") {
			return images.split(',')[0]
		}

		return images[0]
	}

	const onPreviewImage = (images) => {
		const imgs = images.split(',')
		// 图片预览
		uni.previewImage({
			urls: imgs,
			current: 0
		})
	}
	const getDate = (time) => {
		if (time) {
			time = time.replace(/-/g, '/')
			let time1 = new Date(time)
			return timeFormat(time1, 'yyyy年mm月dd日')
		} else {
			return ''
		}
	}

	const qhChar = () => {
		let url = '/pages/charPages/charPages/list?type=order'
		if (isDaifu.value == 1) {
			if (!kehuInfo.id) {
				uni.showToast({
					title: '请选择客户',
					icon: 'none'
				})
				return
			} else {
				url += '&id=' + kehuInfo.id
			}
		}

		uni.navigateTo({
			url
		})
	}

	const jumpAddress = () => {
		uni.navigateTo({
			url: '/pages/address/address/list?type=order'
		})
	}


	const onDaifu = (e) => {
		isDaifu.value = e.value
		charInfo.value = {}
		initStorage()
	}
	const onCharType = (e) => {
		checkV.value = e.value
		initStorage()
	}

	const onQuan = (item) => {
		if (Number(item.info.full) <= Number(formData.value.totle)) {
			quanList.value.map((item1) => {
				item1.isRadio = false;
				if (item1.id == item.id) {
					item1.isRadio = true;
				}
			});
			showPopup.value = false;
			currentYHQ.value = item;
			uni.setStorageSync('currentYHQ', JSON.stringify(currentYHQ.value))
			getPrice()
		}
	};

	const inputNum = (e) => {
		const v = inputNumber(e.detail.value)
		nextTick(() => {
			formData.value.mobile = v
		})
	}

	const isLoading = ref(false)
	const saveOrder = async () => {
		if (isLoading.value) return

		if (isDaifu.value == 1) {
			if (!kehuInfo.id) {
				uni.showToast({
					title: '请选择客户',
					icon: 'none'
				})
				return
			}
		}

		if (!charInfo.value.id) {
			xaoi.toast('请选择车辆')
			return
		}

		const time = new Date(charInfo.value.b_day.replace(/-/g, '/')).getTime()
		const time1 = new Date().getTime()
		if (time < time1) {
			uni.showModal({
				title: '',
				content: '您的车辆暂未购买保险，无法进行验车',
				// 确认按钮
				confirmText: '前往购买',
				// 取消按钮
				cancelText: '取消',
				// 按钮颜色
				confirmColor: '#348B8A',
				success: async (res) => {
					if (res.confirm) {
						uni.switchTab({
							url: '/pages/main/baoxian'
						})
					}
				}
			});
			return
		}

		if (checkV.value == 1) {
			if (!formData.value.day) {
				xaoi.toast('请选择取车时间')
				return
			}

			if (!addressInfo.value.id) {
				xaoi.toast('请选择取车地点')
				return
			}

		} else if (checkV.value == 0) {
			// if (!formData.value.day) {
			// 	xaoi.toast('请选择预约时间')
			// 	return
			// }
		}

		if (!formData.value.name) {
			uni.showToast({
				title: '请输入姓名',
				icon: 'none'
			})
			return
		}
		if (!formData.value.mobile) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			})
			return
		}

		if (!/^1\d{10}$/.test(formData.value.mobile)) {
			uni.showToast({
				title: '请输入11位手机号',
				icon: 'none'
			});
			return;
		}

		// if (!fileList.value || fileList.value.length == 0) {
		// 	uni.showToast({
		// 		title: '请上传其他资料',
		// 		icon: 'none'
		// 	})
		// 	return
		// }
		if (currentYHQ.value.id) {
			formData.value.coupon_id = currentYHQ.value.id
		}

		formData.value.sid = pageId.value
		formData.value.car_id = charInfo.value.id
		formData.value.way = checkV.value
		if (checkV.value == 1) {
			formData.value.address = addressInfo.value.id
		}
		if (fileList.value && fileList.value.length > 0) {
			formData.value.images = fileList.value.map(item => item.url).join(',')
		} else {
			formData.value.images = ''
		}

		if (isDaifu.value == 1) {
			formData.value.is_dai = 1
			formData.value.uid = kehuInfo.id
		} else {
			formData.value.is_dai = 0
		}

		isLoading.value = true
		uni.showLoading({
			title: '加载中'
		})
		const res = await $post('/stores/add_order', formData.value)

		if (res) {
			uni.hideLoading()

			if (res.msg) {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
				return
			}
			uni.removeStorageSync('charId')
			uni.removeStorageSync('addressId')
			uni.removeStorageSync('orderYancheC')
			uni.removeStorageSync('currentYHQ')

			let status = await Vue.$pay(res, 0)
			isLoading.value = false
			switch (status) {
				case 'success':
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					});
					break;
				case 'cancel':
					uni.showToast({
						title: '取消支付',
						icon: 'none',
						duration: 2000
					});
					break;
				case 'fail':
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					});
					break;
			}

			setTimeout(() => {
				let url = '/pages/mine/mine/order'
				if (isDaifu.value == 1) {
					url += '?isDF=1'
				}
				uni.reLaunch({
					url
				});
			}, 800)

		} else {
			uni.hideLoading()
			isLoading.value = false
		}

	}

	let jlCharId = ''
	let jlAddressId = ''

	const customerList = ref({})
	const getKehuList = async () => {
		const res = await $post('/stores/my_customer')
		if (res.list && res.list.length > 0) {
			res.list.map(item => {
				if (item.remark) {
					item.nickname = item.nickname + '（' + item.remark + '）'
				}
			})
		}
		customerList.value = res.list
	}

	const userInfo = ref({})
	const getUserInfo = async () => {
		const res = await $post('/user/get_user')
		userInfo.value = res.info

		const orderYancheC = uni.getStorageSync('orderYancheC')

		// if (orderYancheC && orderYancheC.mobile) {
		// 	formData.value.mobile = orderYancheC.mobile
		// } else {
		// 	formData.value.mobile = res.info.mobile
		// }
		if (userInfo.value.is_yw == 1) {
			getKehuList()
		}
	}

	const showPicker = ref(false)
	const columns = ref([])
	const keyName = ref('label')
	const pickerCurrent = ref('')
	const pickerType = ref('')

	const onKehu = () => {
		columns.value = [customerList.value]
		keyName.value = 'nickname'
		pickerCurrent.value = kehuInfo.name
		showPicker.value = true
		pickerType.value = 'kehu'
	}

	const onPicker = (v) => {
		if (pickerType.value == 'kehu') {
			kehuInfo.name = v.nickname
			kehuInfo.id = v.id
		}

		initStorage()
		showPicker.value = false
	}



	Vue.onHide(() => {
		console.log(1, 'hide')
		// uni.removeStorageSync('charId')
		// uni.removeStorageSync('addressId')
	})
	const inputChange = () => {
		initStorage()
	}

	// const orderYancheC = ref({})
	const initStorage = () => {
		const orderYancheC = {
			isDaifu: isDaifu.value, // 是否代付
			kehuName: kehuInfo.name, // 代付客户name
			kehuId: kehuInfo.id, // 代付客户Id
			checkV: checkV.value, // 是否上门取车
			day: formData.value.day, // 取车时间
			name: formData.value.name, // 联系人姓名
			mobile: formData.value.mobile, // 联系人手机号
			fileList: JSON.stringify(fileList.value) // 其他资料
		}
		uni.setStorageSync('orderYancheC', orderYancheC)
	}

	Vue.onShow(() => {
		initPage();

		const charId = uni.getStorageSync('charId')
		// && charId != jlCharId
		if (charId) {
			// jlCharId = charId
			getCarDetail(charId)
		}

		const addressId = uni.getStorageSync('addressId')

		if (addressId && addressId != jlAddressId) {
			jlAddressId = addressId
			getAddress(addressId)
		}
	});

	Vue.onLoad((options) => {
		pageId.value = options.id;
		getDetails();

		const token = uni.getStorageSync('token');
		if (token) {
			getUserInfo()
		}

		const charId = uni.getStorageSync('charId')
		if (!charId) {
			getCarInfo()
		}

		const addressId = uni.getStorageSync('addressId')

		if (!addressId) {
			getDelAddress()
		}

		const orderYancheC = uni.getStorageSync('orderYancheC')

		if (orderYancheC) {
			isDaifu.value = orderYancheC.isDaifu
			kehuInfo.name = orderYancheC.kehuName
			kehuInfo.id = orderYancheC.kehuId
			checkV.value = orderYancheC.checkV
			formData.value.day = orderYancheC.day
			formData.value.name = orderYancheC.name
			formData.value.mobile = orderYancheC.mobile
			fileList.value = JSON.parse(orderYancheC.fileList)
			const date = formData.value.day.replace(/-/g, '/')

			dateV.value = new Date(date).getTime()
		}

	});
</script>

<style lang="scss" scoped>
	.che-leix {
		max-width: 400rpx;
		height: 80rpx;
	}

	.bage-co {
		width: 100%;
		height: 384rpx;
		background: #348b8a;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.con {
		width: 100%;
		position: relative;
		top: 0;
		left: 0;
		z-index: 2;
	}

	.card-base-box {
		height: auto !important;
	}

	.card-cont {
		width: 702rpx;
		height: 276rpx;
		background: #ffffff;
		box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(0, 0, 0, 0.09);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto 0;
		padding: 48rpx 0 0 !important;
		position: relative;

		.card-top {
			margin-top: 0 !important;
		}

		.info {
			border-top: 1rpx solid #e0e0e0;
			padding-top: 18rpx;
		}
	}

	.qiehuan {
		font-family: OPPOSans, OPPOSans;
		font-weight: 400;
		font-size: 24rpx;
		color: #348b8a;
		line-height: 40rpx;
		margin-left: auto;

		image {
			margin-left: 6rpx;
		}
	}

	.label1 {
		color: #2b3f65;
	}

	.le {
		text {
			font-size: 24rpx;
			color: #7d7d7d;
		}
	}

	.form-page {
		background: #fff;
	}

	.price {
		font-family: Roboto, Roboto;
		font-weight: bold;
		font-size: 34rpx;
		color: #E50004;
		line-height: 24rpx;
	}

	.btn2 {
		width: 466rpx;
		height: 76rpx;
		background: #348B8A;
		border-radius: 52rpx 52rpx 52rpx 52rpx;
		font-family: OPPOSans, OPPOSans;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 76rpx;
	}


	.content-p {
		padding: 38rpx 0 92rpx;
		position: relative;

		.clear-icon {
			padding: 24rpx;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 200;

			image {
				width: 44rpx;
				height: 44rpx;
			}
		}

		.title-pop {
			font-family: OPPOSans, OPPOSans;
			font-weight: bold;
			font-size: 30rpx;
			color: #1d2129;
			line-height: 48rpx;
			text-align: center;
		}

		.list {
			max-height: 800rpx;
			overflow-y: auto;
		}

		.item {
			width: 702rpx;
			height: 200rpx;
			margin: 30rpx auto 0;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 1rpx solid #DEDEDE;
			overflow: hidden;

			&.item1 {}

			&.item2 {
				.price {
					color: #BDBDBD !important;

					text {
						color: #BDBDBD !important;
					}
				}

				.hint {
					color: #BDBDBD !important;
				}

				.title {
					color: #BDBDBD !important;
				}

				.test {
					color: #BDBDBD !important;
				}
			}

			.price {
				font-family: Arial, Arial;
				font-weight: bold;
				font-size: 58rpx;
				color: #348B8A;
				line-height: 44rpx;

				text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #348B8A;
				}

				&.price-1 {
					opacity: 0.3;
				}

				&.price-2 {
					opacity: 0.3;
					color: #86909c;

					text {
						color: #86909c;
					}
				}
			}

			.hint {
				font-family: OPPOSans, OPPOSans;
				font-weight: 400;
				font-size: 24rpx;
				color: #348B8A;
				line-height: 32rpx;
				text-align: center;
				margin-top: 10rpx;
			}

			.info {
				padding-left: 60rpx;

				.title {
					font-family: OPPOSans, OPPOSans;
					font-weight: 500;
					font-size: 34rpx;
					color: #1d2129;
					line-height: 44rpx;
				}

				.test {
					font-family: OPPOSans, OPPOSans;
					font-weight: 400;
					font-size: 24rpx;
					color: #86909c;
					line-height: 32rpx;
				}

				.mt-12 {
					margin-top: 12rpx;
				}
			}
		}

		.btns {
			margin-left: auto;
		}



		.con1 {
			padding-right: 26rpx;
			height: 100%;

			.left {
				min-width: 200rpx;
				height: 100%;
				padding: 0 10rpx;
				position: relative;

				&::after {
					display: block;
					content: "";
					width: 2rpx;
					height: 156rpx;
					background-color: #E5E6EB;
					position: absolute;
					top: 50%;
					left: 100%;
					transform: translateY(-50%);
				}
			}
		}

		.radio-icon {
			width: 40rpx;
			height: 40rpx;
			margin-left: auto;
		}
	}

	.buke {
		color: #bdbdbd;
		font-size: 24rpx;
	}
</style>